<template>
  <section>
    <el-card>
      <el-page-header @back="$router.back()" content="多选与禁用" />
    </el-card>
    <el-card class="mt-20">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-table :data="tableData" border>
          <el-table-column prop="first" label="县">
            <template slot-scope="scope">{{ scope.row.first.join(',') || '-' }}</template>
          </el-table-column>
          <el-table-column prop="second" label="乡">
            <template slot-scope="scope">{{ scope.row.second.join(',') || '-' }}</template>
          </el-table-column>
          <el-table-column prop="third" label="村">
            <template slot-scope="scope">{{ scope.row.third.join(',') || '-' }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="selectHandler(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <select-edit v-model="form" />
      </el-col>
    </el-row>
    </el-card>
  </section>
</template>

<script>
import mixins from "./mixins";
import SelectEdit from "./components/select-edit";
const INIT = [
  { first: [], second: [], third: [] },
  { first: [1], second: [1], third: [1] },
  { first: [1, 2, 3], second: [], third: [] },
  { first: [-1], second: [-1], third: [-1] }
];

export default {
  data() {
    return {
      tableData: INIT,
      form: {}
    };
  },

  components: {
    SelectEdit
  },

  mixins: [mixins],

  methods: {
    selectHandler(params) {
      this.form = params;
    }
  }
};
</script>

<style> 
</style>